<script setup lang="ts">

import {onMounted, ref} from "vue";
import BlogCard from "@/components/BlogCard.vue";
import {getBlogList} from "@/api/blog";
import {Toast} from "vant";
import router from "@/router";

const searchText = ref('')
const searchBlog = () => {
  console.log("搜索博客")
}


const list = ref([]);
const loading = ref(false);
const finished = ref(false);


const currentPage = ref(1);
const pageSize = ref(6);
const blogList = ref([])

const fetchBlogList = async () => {
  try {
    const res = await getBlogList(currentPage.value, pageSize.value);
    const {records} = res;
    blogList.value.push(...records);
    if (records.length < pageSize.value) {
      finished.value = true;
    }
    loading.value = false;
    currentPage.value++;

  } catch (error) {
    console.error('获取博客列表失败:', error);
    Toast('获取博客列表失败');
  }
};
const toBlog = (id) => {
  router.push({
    path: `/blog/${id}`,
  })

}


onMounted(() => {
  fetchBlogList(); // 页面加载时自动执行
});
</script>
<template>

  <van-nav-bar right-text="新建" :title="$route.name" @click-right="router.push('/blog/create')">
    <!--    <template #right>-->
    <!--      <van-icon name="search" size="18"/>-->
    <!--    </template>-->
  </van-nav-bar>

  <van-search v-model="searchText" placeholder="搜索我的博客" @search="searchBlog"/>
  <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
  >
    <BlogCard v-for="blog in blogList" :blog="blog" @click="toBlog(blog.id)"/>
  </van-list>


  <van-empty v-show="!blogList || blogList.length < 1" description="还没有博客捏"/>
</template>


<style scoped>
</style>
